<template>
	<view class="main">
		<view class="page-title">财富</view>
		<view class="cf-tabs">
			<view class="cf-tab" :class="active==1?'active' : ''" @click="choose(1)">股权</view>
			<view class="cf-tab" :class="active==2?'active' : ''" @click="choose(2)">国债</view>
		</view>
		<view class="cf-list">
			<view class="cf-item" v-for="(item,index) in items" :key="index">
				<view class="cf-item-title">{{item.title}}</view>
				<view class="cf-item-img">
					<image :src="$global.imgUrl + item.img_path" mode="scaleToFill"></image>
				</view>
				<view class="cf-item-info">
					<view class="item-info">
						<view class="item-info-title">每日收益(元)</view>
						<view class="item-info-num">{{item.day_profits}}</view>
					</view>
					<view class="item-info">
						<view class="item-info-title">投资金额(元)</view>
						<view class="item-info-num">{{item.investment_amount}}</view>
					</view>
					<view class="item-info">
						<view class="item-info-title">预期收益</view>
						<view class="item-info-num">{{item.prospective_earnings}}</view>
					</view>
					<view class="item-info">
						<view class="item-info-title">收益周期(天)</view>
						<view class="item-info-num">{{item.revenue_cycle}}</view>
					</view>
				</view>
				<view class="cf-item-btn">
					<button class="btn" type="default" @click="goDetail(item)">立即投资</button>
				</view>
				<view class="divide"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1,
				items:[],
				page:{
					pageNum:1,
					pageSize:10
				},
				isBottom:false
			}
		},
		methods: {
			//查询商品
			querWare(){
				let url = 'v1/get_goods_list?type=' + this.active + "&page=" + this.page.pageNum + '&page_size=' + this.page.pageSize
				this.$http.get(url,res => {
					this.items = res.data.data
					this.isBottom = this.page.pageNum == res.data.last_page
				})
			},
			//tab切换
			choose(index){
				this.active = index
				this.page.pageNum = 1
				this.querWare()
			},
			goDetail(item){
				uni.setStorageSync('detailData', item);
				uni.navigateTo({
					url: '/pages/caifu/detail/detail'
				})
			}
			
		},
		onLoad(){
			this.querWare()
		},
		onShow() {
			this.page.pageNum = 1
			this.querWare()
		},
		onPullDownRefresh() {
			this.page.pageNum = 1
			this.querWare()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(){
			if(!this.isBottom){
				this.page.pageNum++
				let url = 'v1/get_goods_list?type=' + this.active + "&page=" + this.page.pageNum + '&page_size=' + this.page.pageSize
				this.$http.get(url,res => {
					this.items =[...this.items,...res.data.data] 
					this.isBottom = this.page.pageNum == res.data.last_page
				})
			}else{
				console.log('=========botoom')
			}
		},
	}
</script>

<style lang="scss">
	.cf-tabs{
		width: 670;
		background-color: #F2F2F2;
		justify-content: space-between;
		display: flex;
		align-items: center;
		height: 100upx;
		padding: 0upx 10upx;
		margin-top: 20upx;
		.cf-tab{
			height: 80upx;
			width: 50%;
			line-height: 80upx;
			text-align: center;
		}
		.active{
			background-color: $blue;
			color: $whiteColor;
			border-radius: 20upx;
		}
	}
	.cf-list{
		.cf-item{
			width: 690upx;
			height: 830upx;
			.cf-item-title{
				color: #333333;
				font-size: 32upx;
				font-weight: 500;
				padding-top: 20upx;
			}
			.cf-item-img{
				width: 100%;
				height: 300upx;
				margin-top: 20upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.cf-item-info{
				width: 100%;
				height: 300upx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				.item-info{
					width: 50%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 100upx;
					.item-info-title{
						height: 40upx;
						color: #999999;
						font-size: 24upx;
					}
					.item-info-num{
						height: 60upx;
						color: #333333;
						font-size: 48upx;
					}
				}
			}
			.cf-item-btn{
				margin-top: 20upx;
				padding-left: 100upx;
				padding-right: 100upx;
			}
			.divide{
				width: 750upx;
				margin-left: -30upx;
				height: 20upx;
				background-color: #F2F2F2;
				margin-top: 20upx;
			}
		}
	}
</style>
